<script setup>
import {reactive, ref} from 'vue';
import * as api from '@/api/public';
import moment from 'moment';

const depts = reactive([])

let search = ref('')

let selected = ref('')

let createTimeStart = ref('')
let createTimeEnd = ref('')

const init = () => {
  api.getData({
    page: 1,
    size: 10
  }, '/dept').then(res => {
    depts.push(...res.data)
  })
}

init()

const emits = defineEmits(['query'])

const query = () => {
  emits('query', {
    search: search.value,
    deptId: selected.value,
    createTimeStart: createTimeStart.value ? moment(createTimeStart.value).format('yyyy-MM-DD HH:mm:ss') : '',
    createTimeEnd: createTimeEnd.value ? moment(createTimeEnd.value).format('yyyy-MM-DD HH:mm:ss') : '',
    page: 1,
    size: 10
  })
}

</script>
<template>
  <div class="component-box">
    <div class="left">
      <div class="item">
        <span>行政区划：</span>
        <el-select v-model="selected" placeholder="请选择行政区划" style="width: 220px">
          <el-option

          />
        </el-select>
      </div>
      <div class="item">
        <span>小区：</span>
        <el-select v-model="selected" placeholder="请选择小区" style="width: 220px">
          <el-option

          />
        </el-select>
      </div>
      <div class="item">
        <span>房屋：</span>
        <el-select v-model="selected" placeholder="请选择" style="width: 220px">
          <el-option

          />
        </el-select>
      </div>
      <div class="item">
        <span>姓名：</span>
        <el-input v-model="search" placeholder="请填写" style="width: 220px">
        </el-input>
      </div>
      <div class="item">
        <span>电话：</span>
        <el-input v-model="search" placeholder="请填写" style="width: 220px">
        </el-input>
      </div>
      <div class="item">
        <span>住户类型：</span>
        <el-select v-model="selected" placeholder="默认全部" style="width: 220px">
          <el-option

          />
        </el-select>
      </div>
      <div class="item">
        <span>住户状态：</span>
        <el-select v-model="selected" placeholder="默认全部" style="width: 220px">
          <el-option

          />
        </el-select>
      </div>
    </div>
    <div class="right">
      <el-button @click="">重置</el-button>
      <el-button type="primary" @click="query">搜索</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.component-box {
  display: flex;
  margin-bottom: 12px;
  padding: 10px 10px 0;
  box-sizing: border-box;
  border: 1px solid #c5c5c5;

  .left {
    display: flex;
    //flex: 1;
    flex-wrap: wrap;
    justify-content: stretch;

    .item {
      text-align: right;
      width: 300px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .right {
    display: flex;
    flex: 0.2;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 10px;
  }
}
</style>
